<#include "./base/basic-page.ftl">
<#include "./common/table.ftl">
<#include "./common/modal.ftl">
<#include "./common/form.ftl">
<@page_head>
    <link rel="stylesheet" type="text/css" href="/static/lib/icon/iconfont.css">
    <style type="text/css">
        .navbar .container-fluid{
            margin: 0 auto;
            width: 60%;
        }
        .be-right-navbar .be-user-nav{
            display: none;
        }
        .user-info-list table tr td.item{
            width: 10%!important;
        }
        .user-info-list{
            padding:15px 15px 35px 36px!important;
        }
        .pay-way_w{
            padding-left: 0!important;
        }
        .pay-way_w2 .custom-control{
            padding: 0!important;
        }
        .pay-way_w .custom-radio{
             margin-top: 0;
             margin-bottom: 0;
        }
        .pay-btn-space{
            margin: 10px 0;
        }
        .pay-btn-space button{
            background: #e57a39!important;
            padding: 0 5%;
            border: 0!important;
            box-shadow: none!important;
        }
        .pay-btn-space button:hover{
            background: #e57a39!important;
            box-shadow: none!important;
            border: 0!important;
        }
        .pay-btn-space button:active{
            background: #e57a39!important;
            box-shadow: none!important;
            border: 0!important;
        }
        .pay-btn-space button:visited{
            background: #e57a39!important;
            box-shadow: none!important;
            border: 0!important;
        }
        .pay-way_sc {
            position: relative;
            padding: 10px 20px 10px 20px;
        }
        .pay-way_sc img{
            width: 150px;
        }
        .pay-way_sc::before{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border: 3px solid #e4e4e4;
            content: "";
        }
        .pay-way_sc::after{
            position: absolute;
            font-family:"iconfont" !important;
            font-size:16px;
            font-style:normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            content: "\e751";
            position: absolute;
            right: 5px;
            bottom: 3px;
            color: #e4e4e4;
        }
        .pay-way_w input[type=radio]:checked+.pay-way_sc::before{
            border: 3px solid #e57a39;
        }
        .pay-way_w input[type=radio]:checked+.pay-way_sc::after{
            color: #e57a39;
        }
    </style>
</@page_head>
<@page_body
    site_bar_enable=false
    site_logo='/static/img/img_site_logo_pay.png'
    page_title=""
    side_active="/admin/system/menu"
>
    <div class="main-content container-fluid" style="padding-top: 55px;">
        <div class="center_w" style="width: 60%;">
            <div class="row">
                <!--Responsive table-->
                <div class="col-sm-12">
                    <div class="card card-default">
                        <div class="card-header">
                                <span class="title">
                                    订单信息
                                </span>
                        </div>

                        <form id="payment">
                        <input type="hidden" name="order_num" value="${order.num}">
                        <div class="user-info-list card-body">
                            <table class="no-border no-strip skills">
                                <tbody class="no-border-x no-border-y">
                                <tr>
                                    <td class="icon">
                                        <span class="mdi mdi-case"></span>
                                    </td>
                                    <td class="item">
                                        订单编号：
                                    </td>
                                    <td>${order.num}</td>
                                </tr>
                                <tr>
                                    <td class="icon">
                                        <span class="mdi mdi-label"></span>
                                    </td>
                                    <td class="item">
                                        商品名称：
                                    </td>
                                    <td>${order.goodsName}</td>
                                </tr>
                                <tr>
                                    <td class="icon">
                                        <span class="mdi mdi-store"></span>
                                    </td>
                                    <td class="item">
                                        商户名称：
                                    </td>
                                    <td>${order.merchName}</td>
                                </tr>
                                <tr>
                                    <td class="icon">
                                        <span class="mdi mdi-shopping-cart"></span>
                                    </td>
                                    <td class="item">支付金额：</td>
                                    <td>${order.money?string["0.00"]}元</td>
                                </tr>
                                    <tr>
                                        <td class="icon">
                                            <span class="mdi mdi-shield-check"></span>
                                        </td>
                                        <td class="item">
                                            选择支付方式：
                                        </td>
                                        <td>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3">
                                            <div class="form-check form-check-inline pay-way_w pay-way_w2">
                                            <label class="custom-control custom-radio custom-control-inline">
                                                    <input class="custom-control-input"
                                                           type="radio" name="pay_way" value="1" checked>
                                                    <span class="pay-way_sc">
                                                        <img src="/static/img/img_pay_way_alipay.png" alt="支付宝">
                                                    </span>
                                                </label>
                                                <label class="custom-control custom-radio custom-control-inline">
                                                    <input class="custom-control-input"
                                                           type="radio" name="pay_way" value="2">
                                                    <span class="pay-way_sc">
                                                        <img src="/static/img/img_pay_way_wechat.png" alt="微信支付">
                                                    </span>
                                                </label>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="pay-btn-space">
                                <button class="btn btn-rounded btn-space btn-success btn-lg"
                                    style="padding: 0 36px;"
                                    type="submit"
                                >
                                立即支付
                                </button>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</@page_body>
<@page_foot site_bar_enable=true>
    <div class="modal fade" id="mod-wechat" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true"><span class="mdi mdi-close"></span></button>
                </div>
                <div class="modal-body">
                    <div class="text-center">
                        <#--<div class="text-success"><span class="modal-main-icon mdi mdi-check"></span></div>-->
                        <div class="qrcode_w2">
                        </div>
                        <h3>微信支付-￥${order.money?string['0.00']}元</h3>
                        <p>请打开「手机微信」扫描屏幕上的二维码进行付款</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="mod-alipay" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true"><span class="mdi mdi-close"></span></button>
                </div>
                <div class="modal-body">
                    <div class="text-center">
                        <#--<div class="text-success"><span class="modal-main-icon mdi mdi-check"></span></div>-->
                        <div class="qrcode_w1">
                        </div>
                        <h3>支付宝付款-￥${order.money?string['0.00']}元</h3>
                        <p>请打开「手机支付宝」扫描屏幕上的二维码进行付款</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script src="/static/lib/parsley/parsley.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //initialize the javascript
        var cli = new S7BuyCli();
        cli.init();
        cli.initPayment({orderNum:'${order.num}',returnUrl:'${returnUrl!''}'});
        // cli.initGoodsGroup();
    });
</script>
</@page_foot>